@extends('layouts.default')
@section('css')
    {{--<link rel="stylesheet" href="{{asset('css/iview.css')}}">--}}
    <link rel="stylesheet" type="text/css" href="{{asset('css/eleui-theme-chalk.css')}}">
    <!-- 引入样式 -->
    {{--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--}}
    <!-- 引入组件库 -->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .mineMsgErrClass{
            background: #F56C6C;
            border-color:#f56c6c;
            color:#fff;
        }
    </style>

@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">酒店管理/ <a class="text-primary" href="{{url('admin/machine/index')}}">机器管理</a></h3>
                </div>
                <div class="row">
                </div>
            @include('layouts.message')
            <!-- /.card-header -->
                <div class="card-body">
                    @verbatim
                        <div class="ivu-card ivu-card-bordered " id="machine">
                            <!-- 状态筛选列 -->
                            <div class="one">
                                <div class="select-order-type">
                                    <!-- <ul>
                                    <li @click="switch_status(index)" v-for="(item,index) in orderStateTxt " :key="index" :class="{active:selectOrderTypeState==index}" v-html="item"></li>
                                </ul> -->
                                </div>
                                <div class="search">
                                    <el-form :inline="true" class="demo-form-inline">
                                        <el-form-item style="margin-right:0;width:130px;">
                                            <el-select v-model="search.hotel_id" @change="hotelChange(search.hotel_id)" placeholder="请选择酒店" >
                                                <el-option key="0" label="选择酒店" :value="0">选择酒店</el-option>
                                                <el-option v-for="(item,index) in options" :value-key="item.hotel_id" :key="item.hotel_id" :label="item.name" :value="item.hotel_id"> </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item style="margin-right:0;width:130px;">
                                            <el-select  v-model="search.OptionSearchType" @change="searchConditionChange(currentSearchCondition.OptionVal)" placeholder="请选择搜索类型" >
                                                <el-option v-for="(item,index) in searchCondition"  :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item style="margin-right:0;">
                                            <el-input v-model="search.OptionInput" placeholder="请输入搜索内容"></el-input>
                                        </el-form-item>
                                        <el-form-item @click.native="searchMachine">
                                            <el-button  type="primary">搜索</el-button>
                                        </el-form-item>
                                        <el-form-item >
                                            <el-button type="primary" @click="click_add_machine">添加设备</el-button>
                                            <el-button type="success" @click="batch_set_box_status(1)">批量设置有货</el-button>
                                            <el-button type="warning" @click="batch_set_box_status(0)">批量设置无货</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div><!-- 状态筛选列-结束 -->
                            <el-table
                                    :data="machine"
                                    stripe
                                    @selection-change="machineTableChange"
                                    v-loading="loading.machine_table"
                                    element-loading-text="拼命加载中"
                                    element-loading-spinner="el-icon-loading"
                                    element-loading-background="rgba(0, 0, 0, 0.35)"
                                    style="width: 100%">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        prop="machine_id"
                                        label="机器序号"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="hotel_name"
                                        label="酒店"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="room_num"
                                        label="房间号">
                                </el-table-column>
                                <el-table-column
                                        prop="hotel_address"
                                        label="酒店地址">
                                </el-table-column>
                                <el-table-column
                                        prop="mac"
                                        label="设备mac号">
                                </el-table-column>
                                <el-table-column
                                        prop="create_time"
                                        label="创建时间">
                                </el-table-column>
                                <el-table-column
                                        prop=""
                                        label="设备状态">
                                </el-table-column>
                                <el-table-column
                                        prop=""
                                        label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="primary"   size="medium"  @click="delMachine(scope.row)" >解除绑定</el-button>
                                        <el-button type="success"   size="medium"  @click="handleOpen(scope.row)">查看商品</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <br>
                            <el-pagination
                                    background
                                    :current-page="pageInfo.currentPage"
                                    layout="prev, pager, next"
                                    :page-size="pageInfo.page_size"
                                    :total="pageInfo.total"
                                    @current-change="pageChange"
                            >
                            </el-pagination>
                            <br>


                            <el-dialog
                                    :title="dialog.machine_goods.title"
                                    :visible.sync="dialogVisible"
                                    modal="true"
                                    :before-open="handleOpen"
                                    >

                                <template>
                                    <el-table
                                            :data="machineGoodsList"
                                            v-loading="loading.machine_goods"
                                            element-loading-text="拼命加载中"
                                            element-loading-spinner="el-icon-loading"
                                            element-loading-background="rgba(0, 0, 0, 0.35)"
                                            :row-class-name="tableRowClassName">
                                        <el-table-column
                                                prop="box_id"
                                                label="格子"
                                                width="100">
                                        </el-table-column>
                                        <el-table-column
                                                prop="goods_name"
                                                label="商品名称"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="price"
                                                label="商品原价">
                                        </el-table-column>
                                        <el-table-column
                                                prop="discount_price"
                                                label="商品现价">
                                        </el-table-column>
                                        <el-table-column
                                                prop="box_status"
                                                label="是否有货">
                                        </el-table-column>
                                        <el-table-column
                                                fixed="right"
                                                width="100"
                                                label="操作">
                                            <template slot-scope="scope">
                                                <el-button type="primary"   size="mini"  >打开柜门</el-button>
                                                <el-button type="success"   size="mini"  @click="set_box_status(scope.row,1)">设置有货</el-button>
                                                <el-button type="default"   size="mini"  @click="set_box_status(scope.row,0)">设置无货</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                                <span slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                            </el-dialog>

                            <el-dialog
                                    :title='machine_form.title'
                                    :visible.sync="machine_form.machine_form_visible"
                                    width="30%"
                                    modal="true">

                                <template>
                                    <el-form :model="machine_form.form_data" :rules="machine_form.validate_rules" ref="machine_form" label-width="100px" class="demo-ruleForm">
                                        <el-form-item label="设备名称" prop="machine_name">
                                            <el-input v-model="machine_form.form_data.machine_name"></el-input>
                                        </el-form-item>
                                        <el-form-item label="设备mac号" prop="mac">
                                            <el-select v-model="machine_form.form_data.mac" placeholder="请选择mac">
                                                <el-option v-for="(item,index) in machine_form.unbindmac" :value-key="item.mac" :key="item.mac" :label="item.mac" :value="item.mac"> </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="酒店" prop="hotel_id">
                                            <el-select v-model="machine_form.form_data.hotel_id" placeholder="请选择酒店">
                                                <el-option v-for="(item,index) in options" :value-key="item.hotel_id" :key="item.hotel_id" :label="item.name" :value="item.hotel_id"> </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="房间号" prop="room_num">
                                            <el-input v-model="machine_form.form_data.room_num"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </template>
                                <span slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="click_submit_machine">提交</el-button>
                                </span>
                            </el-dialog>

                            @endverbatim
                            <input type="hidden" id="hotel" value="{{$hotel}}"/>
                            <input type="hidden" id="machineList" value="{{$machineList}}"/>
                            <input type="hidden" id="unbindmac" value="{{$unbind_mac}}">
                        </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>


@stop

@section('script')
    <script type="text/javascript" src="{{asset('js/vue.min.js')}}"></script>
    {{--<script type="text/javascript" src="{{asset('js/view.min.js')}}"></script>--}}
    <script src="{{asset('js/axios.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/element-ui.js')}}"></script>
<script>
    //开启调试模式
    Vue.config.devtools = true;
    let req_url = {
      machineListHref:                      "{{url('admin/machine/getHotelList')}}",
      machineGoodsHref:                     "{{url('api/machine/getMachineGoods')}}",
      delMachineFromHotelHref:              "{{url('api/machine/delMachineFromHotel')}}",
      searchMachineHref:                    "{{url('api/machine/searchMachine')}}",
      saveMachineHref: "{{url('api/machine/saveMachine')}}",
      unbindMachineHref : "{{url('api/machine/unbindMachine')}}",
      settingBoxStatusHref : "{{url('api/machine/settingBoxStatus')}}"
    };
    let service = axios.create({
        timeout:5000,
        headers:{
            'Content-Type': 'application/json;charset=UTF-8'
        },

    });
    new Vue({
        el:"#machine",
        data(){
            return {
                options: [], //存储酒店列表的数据
                searchCondition: [ //第二个搜索框的选项
                    {
                        label:'机器ID',
                        value:'machine.machine_id'
                    },
                    {
                        label:'房间号',
                        value:'machine.room_num'
                    },{
                        label:'机器名称',
                        value:'machine.machine_name'
                    },
                    {
                        label:'设备mac号',
                        value:'machine.mac'
                    },
                ],
                search:{
                    hotel_id   : parseInt('{{$hotel_id}}'), //下拉的酒店id
                    OptionInput : '', //输入搜索框的值
                    OptionSearchType  : '', //搜索框需要搜索的类型
                },
                currentSearchCondition:{
                    OptionVal   : '',
                },
                machine:[],           //通过api获取的设备列表
                machineGoodsList:[], //通过api返回的该设备的每个格子的商品列表
                pageInfo:{
                    page_size:2,
                    total:0
                },
                dialogVisible: false,
                loading:{
                  machine_table:true,
                  machine_goods:true,
                },
                dialog:{
                  machine_goods : {
                      title : '默认',
                  }
                },
                multipleSelection:[],
                machine_form : {
                    unbindmac : [],
                    title : '添加商品',
                    machine_form_visible:false,//设备表单可见性
                    machin_form_type : 'add' , //add-添加 edit-修改
                    validate_rules : {
                        mac: [
                            { required: true, message: '请输入mac码', trigger: 'blur' },
                            { min: 10, max: 20, message: '长度在 10-20 个字符', trigger: 'blur' }
                        ],
                        hotel_id: [
                            { required: true, message: '请选择酒店', trigger: 'change' }
                        ],
                        room_num: [
                            { required: true, message: '请选择房间号', trigger: 'blur' }
                        ],

                    },
                    form_data : {
                        mac : '',
                        hotel_id : '',
                        room_num : '',
                        machine_name : '',
                        machine_id : '',
                    },
                },

            }
        },
        methods: {
            setOptions:function (event) {
                let hotelInput = document.getElementById('hotel');
                let unbindmac = document.getElementById('unbindmac').value;
                let hotel      = hotelInput.value;
                hotel          = JSON.parse(hotel);
                this.options = hotel;
                this.machine_form.unbindmac = JSON.parse(unbindmac);
            },
            getMachineList:function () {
                let current_page = localStorage.getItem('current_page');
                current_page     = current_page>=1?current_page:1;
                this.pageChange(current_page);
            },
            pageChange:function (current_page) {
                let url = req_url.machineListHref;
                this.loading_start('machine_table');
                service.post(url,{
                    page:current_page
                }).then((res)=>{
                          let data = res.data;
                          this.loading_end('machine_table');
                          if (data.ret==200){
                              this.machine            = data.data.data;
                              let page                = data.data;
                              this.pageInfo.currentPage       = page['current_page']
                              this.pageInfo['page_size']      = page['per_page'];
                              this.pageInfo['total']          = page['total'];
                              this.pageInfo['current_page']   = page['current_page'];
                              this.pageInfo['last_page']      = page['last_page'];
                          }
                    });
                localStorage.setItem('current_page',current_page);
            },
            getMachineGoodsByMachineId(machine_id)
            {
                let url = req_url.machineGoodsHref;
                this.loading_start('machine_goods');
                service.post(url,{
                    machine_id:machine_id
                }).then((res)=>{
                    this.loading_end('machine_goods');
                    let data = res.data;
                    if (data.ret==200){
                        this.machineGoodsList = data.data;
                    }
                })
            },
            getSearchMachineList()
            {
                let url = req_url.searchMachineHref;

                let search = {
                  'machine.hotel_id' : this.search.hotel_id,
                };
                if(!!this.search.OptionSearchType){
                    search[this.search.OptionSearchType] = this.search.OptionInput;
                }
                this.loading_start('machine_table');
                service.post(url,search).then((res)=>{
                    let data = res.data;
                    this.loading_end('machine_table');
                    if (data.ret==200){
                        this.machine            = data.data.data;
                        let page                = data.data;
                        this.pageInfo.currentPage       = page['current_page']
                        this.pageInfo['page_size']      = page['per_page'];
                        this.pageInfo['total']          = page['total'];
                        this.pageInfo['current_page']   = page['current_page'];
                        this.pageInfo['last_page']      = page['last_page'];
                    }
                });
            },
            delMachineFromHotel(machine_id)
            {
                this.$confirm('确认要解绑该设备吗?','提示')
                    .then(function(){
                        let url = req_url.delMachineFromHotelHref;
                        service.post(url,{
                            machine_id:machine_id
                        }).then((res)=>{
                            let data = res.data;
                            if (data.ret==200){
                                location.reload()
                            }
                        })
                    });
            },
           handleOpen(row){
                this.dialog.machine_goods.title = '酒店:'+row.hotel_name+', 房间:'+row.room_num+'下的设备'+row.machine_id;
                let machine_id      =  row.machine_id;
                this.getMachineGoodsByMachineId(machine_id);
                this.dialogVisible  = true;
           },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                } else if(rowIndex === 5){
                    return 'warning-row';
                }
                return '';
            },
            delMachine(row) {
                let machine_id      =  row.machine_id;
                this.delMachineFromHotel(machine_id);
            },
            hotelChange(hotel_id){
                this.getSearchMachineList('machine.hotel_id',hotel_id,'=')
            },
            searchConditionChange(){

            },
            searchMachine() {
                let key = this.search.OptionSearchType;
                let val = this.search.OptionInput;
                if (key==undefined||key==''){
                    this.$message({
                        message: '搜索条件选项不能为空',
                        type: ' ',
                        customClass:"mineMsgErrClass",
                        duration:2000,
                    });
                    return;
                }
                this.getSearchMachineList()
            },

            //点击添加设备按钮后的事件
            click_add_machine(){
                if(this.$refs['machine_form']){
                    this.$refs['machine_form'].resetFields();
                }
                this.machine_form.machin_form_type = 'add';
                this.machine_form.title = '添加设备';
                this.machine_form.machine_form_visible = true;
            },

            //点击添加设备或者编辑设备的提交按钮
            click_submit_machine()
            {
                this.$refs['machine_form'].validate((valid) => {
                    if (valid) {
                        //提交表单
                        service.post(req_url.saveMachineHref,this.machine_form.form_data).then((res)=>{
                            let data = res.data;
                            if (data.ret==200){
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                            }else{
                                this.$message.error(data.msg);
                            }
                        });
                        this.machine_form.machine_form_visible = false;
                        this.timeoutReload();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //点击解除绑定的按钮弹出提示框事件
            click_unbind_button(){

            },
            timeoutReload()
            {
                setTimeout(function(){
                    location.reload();
                },1500)
            },
            loading_start(element){
                this.loading[element] = true;
            },
            loading_end(element){
                this.loading[element] = false;
            },
            //设备有货，无货
            set_box_status(row,status)
            {
                this.loading_start('machine_goods');
                service.post(req_url.settingBoxStatusHref,{
                    machine_id : row.machine_id,
                    box_status : status,
                    box_id     : row.box_id,
                }).then((res)=>{
                    this.loading_end('machine_goods');
                    let data = res.data;
                    if (data.ret==200){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.getMachineGoodsByMachineId(row.machine_id);
                    }else{
                       this.$message.error(data.msg);
                    }
                });
            },
            machineTableChange(val){
                this.multipleSelection = val;
            },

            //批量设置有货，无货
            batch_set_box_status(status){
                var postData = [];

                if(this.multipleSelection.length == 0){
                    this.$message.error('请至少选择一个设备!');
                    return false;
                }
                this.loading_start('machine_table');
                this.multipleSelection.forEach(function(val){
                    postData.push({
                        machine_id : val.machine_id,
                        box_status : status,
                    })
                });

                service.post(req_url.settingBoxStatusHref,postData).then((res)=>{
                    this.loading_end('machine_table');
                    let data = res.data;
                    if (data.ret==200){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(data.msg);
                    }
                });
            },

        },
        created() {
            this.setOptions();
            this.getSearchMachineList();
            this.pageInfo['current_page']   = localStorage.getItem('current_page');
        }
    })

</script>
@stop